<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-10 09:30:51
 * @LastEditTime: 2019-09-12 16:00:31
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="findPassWord-box">
    <!-- //<topNav topNavTitle="找 回 密 码" /> -->
    <div class="topNavs">
      <van-nav-bar :title="title"
                   left-arrow
                   @click-left="$router.go(-1)" />
    </div>
    <div class="findPassWord-list">

      <van-cell-group class="item user-item">
        <van-field v-model="phone"
                   clearable
                   :disabled="disabled"
                   left-icon="contact"
                   placeholder="请输入登录手机号" />
      </van-cell-group>
      <van-cell-group class="item yzm-item">
        <van-field v-model="verificationCode"
                   clearable
                   left-icon="contact"
                   placeholder="请输入6位验证码" />
        <a class="getYZM"
           @click="getYZM">获取验证码</a>
      </van-cell-group>
      <van-cell-group class="item password-item">
        <van-field v-model="newPassword"
                   clearable
                   type="password"
                   left-icon="contact"
                   placeholder="请填写新密码" />
      </van-cell-group>
      <van-cell-group class="item password-item">
        <van-field v-model="aginNewPassword"
                   clearable
                   type="password"
                   left-icon="contact"
                   placeholder="请再次填写新密码" />
      </van-cell-group>
      <p class="tip"
         v-if="tipShow">
        密码必须为6-14位数，英文字母的组合</p>
    </div>

    <div class="loginBtn-wrap">
      <button class="loginBtn"
              @click="login">确定</button>
    </div>
  </div>

</template>

<script>
import { Toast } from 'vant';
import topNav from "@/components/topNav";
import { setTimeout } from 'timers';
export default {

  components: {
    topNav
  },

  data () {
    return {
      user: "",
      phone: "",
      verificationCode: "",
      newPassword: "",
      aginNewPassword: "",
      type: "",//1 忘记密码 2 修改密码
      tipShow: false,
      disabled: false,
      title: "找回密码",
      imgUrl1: require('../assets/img/error.gif'),
      imgUrl2: require('../assets/img/success.gif')


    }
  },
  mounted () {
    this.user = JSON.parse(localStorage.getItem("user"));
    this.type = this.$route.params.type;
    if (this.type == "1") {
      this.tipShow = false;
      this.disabled = false;
      this.phone = "";
      this.title = "找回密码"

    } else {
      this.tipShow = true;
      this.disabled = true;
      this.$nextTick(() => {
        this.phone = this.user.phone;
      })
      this.title = "修改密码"

    }
  },
  methods: {
    //获取验证码
    getYZM () {
      let params1 = {
        phone: this.phone
      }
      this.$http.post("getPublicAgencyAccountverificationCode", params1).then((res) => {
      }).catch(function (error) {
        console.log(error);
      });

    },
    //登录
    login () {
      let reg = /[0-9a-zA-Z].*\S|\S.*[0-9a-zA-Z]/;
      let params = {
        phone: this.phone,
        verificationCode: this.verificationCode,
        newPassword: this.newPassword
      };

      if (this.verificationCode) {
        //密码格式校验
        if (this.newPassword) {
          if (reg.test(this.newPassword)) {
            if (this.aginNewPassword) {
              //两次密码比对
              if (this.newPassword != this.aginNewPassword) {
                Toast({
                  message: '两次填写的密码不一样',
                  icon: this.imgUrl1
                });
              } else {
                this.$http.post("publicAgencyAccountPwdForget", params).then((res) => {
                  if (res.data.code == "success") {
                    setTimeout(() => {
                      this.$router.push({ name: 'login' })
                    }, 4000);
                    Toast({
                      message: '修改成功',
                      icon: this.imgUrl2
                    });
                  } else {
                    Toast({
                      message: res.data.message,
                      icon: this.imgUrl1
                    });
                  }
                }).catch(function (error) {
                  console.log(error);
                });
              }
            } else {
              Toast({
                message: '请再次输入新密码',
                icon: this.imgUrl1
              });
            }
          } else {
            Toast({
              message: '密码必须为6-14位数，英文字母的组合',
              icon: this.imgUrl1
            });
          }


        } else {
          Toast({
            message: '请输入密码',
            icon: this.imgUrl1
          });
        }
      } else {
        Toast({
          message: '请输入验证码',
          icon: this.imgUrl1
        });
      }


    }
  }
}
</script>

<style lang="scss" >
@import "@/assets/css/common.scss";
.findPassWord-box {
  .findPassWord-list {
    width: 85%;
    margin: 0.2rem auto;
    .item {
      position: relative;
      .van-cell {
        align-items: center;
        .van-field__left-icon .van-icon {
          width: 0.48rem;
          height: 0.48rem;
          margin-right: 0.1rem;

          &:before {
            content: "";
          }
        }
      }
      &.user-item {
        .van-field__left-icon .van-icon {
          background: url("../assets/img/user.png") center no-repeat;
          background-size: cover;
        }
      }
      &.password-item {
        .van-field__left-icon .van-icon {
          background: url("../assets/img/lock.png") center no-repeat;
          background-size: cover;
        }
      }
      &.yzm-item {
        .van-field__left-icon .van-icon {
          background: url("../assets/img/yzm.png") center no-repeat;
          background-size: cover;
        }
      }
      .getYZM {
        position: absolute;
        top: 0.3rem;
        right: 0;
        display: inline-block;
        background: $theme-color;
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 3px;
        transform: scale(0.85);
        -webkit-transform: scale(0.85);
      }
    }
    .tip {
      color: rgba(128, 128, 128, 1);
      font-size: 12px;
      transform: scale(1, 0.9);
      text-align: left;
    }
  }

  .loginBtn {
    background: $theme-color;
    width: 80%;
    height: 1rem;
    line-height: 1rem;
    border: 0 none;
    border-radius: 0.5rem;
    font-size: 0.4rem;
    font-weight: bold;
    position: fixed;
    bottom: 1rem;
    left: 10%;
  }
  .van-icon__image {
    width: 0.9rem;
    height: 0.9rem;
  }
}
</style>